<template>
    <div :class="['layout-container', collapsed?'hideSidebar': '']">
        <div :class="['left-container', 'no-scroll']">
            <!-- 标题 -->
            <Logo/>
            <!-- 导航栏 -->
            <menuComponent/>
        </div>

        <!--左侧区域-->
        <div class="right-container">
            <navbar/>
            <router-view/>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import Logo from '@/layout/Logo'
import Navbar from '@/layout/Navbar'
import menuComponent from '@/layout/Menu'

export default {
    components: {
        Navbar,
        Logo,
        menuComponent,
    },
    data () {
        return {
        }
    },
    mounted () {},
    methods: {},
    computed: {
      ...mapState({
        sidebar: state => state.app.sidebar,
      }),
      collapsed(){
        return !this.sidebar.opened
      }
    },

}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
